<template>
  <div>
    <!-- 头部 -->
    <div class="hd-nav">
      <!-- 导航 -->
      <i @click="goback" class="iconfont icon-xiangzuo1 icon-1"></i>
      <!-- <p>{{ movieArray.nm }}</p> -->
      <i class="iconfont icon-fenxiang icon-2"></i>
    </div>
    <h1 class="title">3号厅(激光银幕)</h1>
    <table class="table">
      <tr v-for="(re, ri) in cinemaSeat.length" :key="ri">
        <td
          @click="seat(ri, ci)"
          v-for="(ce, ci) in cinemaSeat[ri].seats"
          :key="ci"
          :class="cinemaSeat[ri].seats[ci] == false ? '' : 'td-active'"
        ></td>
        <!-- :class="
            isItemInArray(activeArray, [re, ce]) == true ? 'td-active' : ''
          " -->
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "cinemaVenue",
  data() {
    return {
      cinemaSeat: [], //座位
      columnSize: 8, //列
      rowSize: 5, //行
      rIndex: -1,
      cIndex: -1,
      activeArray: [], //渲染数组
      tempArray: [], //转换数组
      // rArray: [],
      // cArray: [],
      newArr: [],
    };
  },
  methods: {
    goback() {
      this.$router.go(-1);
    },
    getData() {
      let pro = axios.get("cinema/seat.json");
      pro
        .then((res) => {
          // this.cinemaSeat = res.seat.regions[0].rows;
          this.tempArray = res.seat.regions[0].rows;
          this.tempData(this.tempArray);
          // console.log("渲染电影院---->", res.seat);
          // console.log("渲染电影院---->", res.seat.regions[0].rows);
        })
        .catch((err) => {
          console.log("请求失败----->", err);
        });
    },
    // 高亮逻辑
    isItemInArray(array, item) {
      for (var i = 0; i < array.length; i++) {
        if (array[i][0] == item[0] && array[i][1] == item[1]) {
          console.log(array[i]);
          return true; // Found it
        }
      }
      return false; // Not found
    },
    seat(r, c) {
      console.log(r, c);

      if (this.cinemaSeat[r].seats[c]== true) {
        console.log("相同");
        this.cinemaSeat[r].seats[c] = false;
        console.log(this.cinemaSeat[r].seats);
        this.cinemaSeat = this.cinemaSeat.slice();
      } else {
        console.log("不相同");
        this.cinemaSeat[r].seats[c] = true;
        this.cinemaSeat[r].seats;
        this.cinemaSeat = this.cinemaSeat.slice();
      }

      this.rIndex = r;
      this.cIndex = c;
      // console.log(this.cinemaSeat[r]);

      // this.activeArray.push([r, c]);
      // this.activeArray = [];
      // // console.log('b---->', b);
      // for (let q = 0; q < this.tempArray.length; q++) {
      //   // console.log(this.tempArray[i]);
      //   if (this.tempArray[q][0] == r && this.tempArray[q][1] == c) {
      //     // this.newArr.push(this.tempArray[i]);
      //     // console.log(this.newArr);
      //     return;
      //   } else {
      //     console.log("不重复---", this.tempArray[q]);
      //     this.activeArray = this.tempArray[q];
      //   }
      //   //  console.log(a[i][0] == b[0] && a[i][1] == b[1]);
      // }
      // this.requestArray(this.tempArray, [r, c]);
      // console.log(this.requestArray(this.tempArray, [r, c]));
      // console.log(r + "排" + c + "列");
    },
    requestArray(a, r, c) {
      this.activeArray = [];
      // console.log('b---->', b);
      for (let q = 0; q < a.length; q++) {
        // console.log(a[i]);
        if (a[q][0] == r && a[q][1] == c) {
          // this.newArr.push(a[i]);
          // console.log(this.newArr);
          return;
        } else {
          console.log("不重复---", a[q]);
          this.activeArray = a[q];
        }
        //  console.log(a[i][0] == b[0] && a[i][1] == b[1]);
      }
    },
    tempData(k) {
      for (let i = 0; i < k.length; i++) {
        // console.log('k[i]---->',k[i].seats);
        for (let j = 0; j < k[i].seats.length; j++) {
          // let obj = {}
          k[i].seats[j] = false;
          console.log(k[i].seats[j]);
        }
      }
      // console.log('false---',k);
      this.cinemaSeat = k;
      // this.cinemaSeat[2].seats[3] = true;
      // console.log(this.cinemaSeat[2].seats[3]);
    },
  },
  created() {
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
// 头部
.hd-nav {
  width: 100%;
  height: 44px;
  background: #dd403b;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  .icon-1 {
    font-size: 30px;
    margin-left: 10px;
    color: rgb(255, 255, 255);
  }
  .icon-2 {
    font-size: 28px;
    margin-right: 10px;
    color: rgb(255, 255, 255);
    font-weight: bold;
  }
  .icon-3 {
    font-size: 30px;
    margin-right: 10px;
    color: rgb(255, 255, 255);
    //  font-weight: bold;
  }
  .icon-active {
    color: #ffab0f;
  }
  p {
    font-size: 22px;
    color: rgb(255, 255, 255);
    width: 60%;
    font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
      "Lucida Sans", Arial, sans-serif;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
.title {
  margin-top: 44px;
  font-size: 20px;
  width: 100%;
  padding: 5px 0;
  text-align: center;
}
.table {
  width: 352px;
  margin: 0 auto;
  tr {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin: 10px 0;
    td {
      width: 18px;
      height: 18px;
      border-radius: 3px;
      border: 1px solid #8be4e3;
      background: rgb(255, 255, 255);
    }
    .td-active {
      background: #ff7777;
      border: 1px solid #ff7777;
      animation: movies 0.8s;
    }
  }
}
@keyframes movies {
  0% {
    transform: scale(0.6);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
</style>